﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
@section Content {
    <link href="~/Areas/WeChat/Shared/iconfont.css" rel="stylesheet" />    
}
<script>
    var keyValue = $.request("keyValue"),
        settings = {
            banner: {
                show: ['.image'],
                hide: ['.content', '.icon'],
                type: 'site',
                data: ''
            },
            sitetype: {
                show: ['.icon'],
                hide: ['.image', '.content'],
                type: 'type',
                data: ''
            },
            news: {
                show: ['.image'],
                hide: ['.content', '.icon'],
                type: 'text',
                data: ''
            },
            hot: {
                show: ['.image'],
                hide: ['.content', '.icon'],
                type: 'self',
                data: 'hot1, hot2, hot3, hot4, hot5, hot6'
            },
            hot1: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            },
            hot2: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            },
            hot3: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            },
            hot4: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            },
            hot5: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            },
            hot6: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            },
            topic: {
                show: ['.image'],
                hide: ['.content', '.icon'],
                type: 'self',
                data: 'topic1, topic2, topic3'
            },
            topic1: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            },
            topic2: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            },
            topic3: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            },
            like: {
                show: [],
                hide: ['.image', '.content', '.icon'],
                type: 'site',
                data: ''
            }
            
        };
    $(function () {
        initIcons();

        if (!!keyValue) {
            $.ajax({
                url: "/WeChat/SettingItems/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    //console.dir(data);
                    $("#form1").formSerialize(data);

                    if (data.F_State) {
                        $("#F_State1").prop("checked", true);
                    } else {
                        $("#F_State2").prop("checked", true);
                    }
                    if (data.F_ImageSrc) {
                        $("#F_ImageSrc_Preview").attr("src", data.F_ImageSrc + '-400x267');
                    }
                    $("#iconPanel input[type='radio'][value='" + data.F_Icon + "']").prop("checked", true);

                    initControl(data);
                }
            });
        } else {
            initControl();
        }
    });

    function initIcons() {
        var html = '',
            icons = ['icon-school', 'icon-ship', 'icon-marker ', 'icon-cinema', 'icon-canting', 'icon-wheel', 'icon-crown', 'icon-hotal', 'icon-feature', 'icon-sofa', 'icon-tower', 'icon-roma', 'icon-meeting', 'icon-fashion', 'icon-shop', 'icon-gymnasium'],
            texts = ['社区学校', '游船码头', '地标 ', '影院剧院', '餐厅酒吧', '试驾场地', '高端会所', '星级酒店', '特色场地', '公共空间', '写字楼', '艺术馆画廊', '会务中心', '秀场场馆', '商业广场', '体育场馆'];
        for (var i = 0; i < icons.length; i++) {
            html += '<label class="radio-inline">';
            html += '   <input type="radio" name="inlineRadioOptions" value="' + icons[i] + '" onclick="checkImage(this)">';
            html += '   <span class="iconfont ' + icons[i] + '" style="font-size:32px;"></span>&nbsp;';
            html += texts[i];
            html += '</label>';
        }

        $("#iconPanel").html(html);
    }

    function initControl(settingItem) {
        $.ajax({
            url: "/WeChat/Setting/GetKeyValueJson",
            data: {},
            dataType: "json",
            async: false,
            success: function (data) {
                //console.dir(data);
                var dom = $("#F_SettingId1"),
                    html = [],
                    currentValue = '';
                
                if (data.length) {
                    currentValue = data[0].Value;
                    var tag = data[0].F_Description;
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        if (item.Value == $("#F_SettingId").val()) {
                            tag = item.F_Description;
                            currentValue = item.Value;
                            $("#F_SettingId").val(item.Value);
                            html.push('<option value="' + item.Value + '|' + item.F_Description + '" selected>' + item.Text + '</option>');
                        } else {
                            html.push('<option value="' + item.Value + '|' + item.F_Description + '">' + item.Text + '</option>');
                        }
                    }
                    dom.html(html.join(''))
                        .bindSelect();
                    dom.on("select2:select", changeSetting);

                    $("#F_SettingId").val(currentValue);
                    bindPanel(tag, settingItem);
                }
            }
        });
    }

    function changeSetting(e) {
        var current = $(this).val();
        if (current && current.indexOf('|') !== -1) {
            var value = current.split('|')[0],
                tag = current.split('|')[1];
            $("#F_SettingId").val(value);

            bindPanel(tag);
        }
    }

    function bindPanel(tag, settingItem) {
        if (tag && settings[tag]) {
            for (var i = 0; i < settings[tag].show.length; i++) {
                var showItem = settings[tag].show[i];
                $(showItem).show();
            }

            for (var i = 0; i < settings[tag].hide.length; i++) {
                var hideItem = settings[tag].hide[i];
                $(hideItem).hide();
            }
        }

        bindAddressSelect(settings[tag], settingItem)
    }

    function bindAddressSelect(setting, settingItem) {
        $.ajax({
            url: "/WeChat/Setting/GetAddress",
            data: { type: setting.type, data: setting.data },
            dataType: "json",
            async: false,
            success: function (data) {
                var dom = $("#F_LinkId"),
                    html = [];
                if (data.length) {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        if (settingItem) {
                            //console.log(settingItem);
                            if (settingItem.F_LinkId == item.Value) {
                                html.push('<option value="' + item.Value + '" selected>' + item.Text + '</option>');
                            } else {
                                html.push('<option value="' + item.Value + '">' + item.Text + '</option>');
                            }
                        }
                        else {
                            html.push('<option value="' + item.Value + '">' + item.Text + '</option>');
                        }
                    }
                }
                dom.html(html.join(''))
                    .select2();
            }
        });
    }

    function uploader() {
        $.modalOpen({
            id: "WeChatUploader",
            title: "添加图片",
            url: "/WeChat/SettingItems/ShowUploader",
            width: "600px",
            height: "230px",
            callBack: function (iframeId) {
                top.frames[iframeId].submitForm();
            }
        });
    }

    function settingImage(imageSrc) {
        $("#F_ImageSrc").val(imageSrc);
        if (imageSrc) {
            $("#F_ImageSrc_Preview").attr("src", imageSrc + '-400x267');
        }
    }

    function checkImage(self) {
        if (self.checked) {
            $("#F_Icon").val(self.value);
        }
    }

    function submitForm() {
        if (!$('#form1').formValid()) {
            return false;
        }
        var serialize = $("#form1").formSerialize();
        var params = $.extend({ F_State: $("#F_State1").prop("checked") }, serialize);
        //console.dir(params);
        $.submitForm({
            url: "/WeChat/SettingItems/SubmitForm?keyValue=" + keyValue,
            param: params,
            success: function () {
                $.currentWindow().$("#gridList").trigger("reloadGrid");
            }
        });
    }
</script>

<form id="form1">
    <div style="padding-top: 20px; margin-right: 20px;">
        <table class="form">
            <tr>
                <th class="formTitle">菜单编号</th>
                <td class="formValue">
                    <input type="hidden" name="F_SettingId" id="F_SettingId" />
                    <select id="F_SettingId1" name="F_SettingId1" class="form-control required">
                        <option value="">==请选择==</option>
                    </select>
                </td>
                <th class="formTitle image">图片地址</th>
                <td class="formValue image" rowspan="5">
                    <input id="F_ImageSrc" name="F_ImageSrc" type="hidden" />
                    <img id="F_ImageSrc_Preview" style="width:140px; height:140px;" src="" alt="显示图" class="img-rounded">
                    <p>
                        <button type="button" class="btn btn-info btn-xs" onclick="uploader()">上传．．．</button>
                    </p>
                </td>
            </tr>
            <tr>
                <th class="formTitle">状态</th>
                <td class="formValue">
                    <label class="checkbox-inline">
                        <input type="radio" name="F_State" id="F_State1" value="1" checked> 启用
                    </label>
                    <label class="checkbox-inline">
                        <input type="radio" name="F_State" id="F_State2" value="0"> 禁用
                    </label>
                </td>
                <th class="formTitle"></th>
            </tr>
            <tr>
                <th class="formTitle">所属地址/编号</th>
                <td class="formValue">
                    @*<input id="F_LinkId" name="F_LinkId" type="text" class="form-control" placeholder="请录入跳转地址编号" />*@
                    <select id="F_LinkId" name="F_LinkId" class="form-control">
                    </select>
                </td>
                <th class="formTitle"></th>
            </tr>
            <tr>
                <th class="formTitle">排序</th>
                <td class="formValue">
                    <input id="F_Sort" name="F_Sort" type="text" class="form-control" placeholder="请录入排序" />
                </td>
                <th class="formTitle"></th>
            </tr>
            <tr>
                <th class="formTitle">标题</th>
                <td class="formValue">
                    <input id="F_Title" name="F_Title" type="text" class="form-control required" placeholder="请录入标题" maxlength="40" />
                </td>
            </tr>
            <tr class="content">
                <th class="formTitle">主题内容</th>
                <td class="formValue" colspan="3">
                    <textarea id="F_Subject" name="F_Subject" class="form-control" style="width:95%;" placeholder="请录入主题内容"></textarea>
                </td>
            </tr>
            <tr class="icon">
                <th class="formTitle">图标</th>
                <td class="formValue" colspan="3">
                    <input id="F_Icon" name="F_Icon" type="hidden" />
                    <div id="iconPanel"></div>
                </td>
            </tr>
        </table>
    </div>
</form>


